<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>修改密码</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/gloab.css" rel="stylesheet">
    <link href="/static/css/register.css" rel="stylesheet">
    <script src="/static/js/jquery-1.11.1.min.js"></script>
    <script src="/static/js/register.js"></script>
</head>
<body class="bgf4">
<div class="login-box f-mt10 f-pb50" style="margin-top: 10%">
    <div class="main bgf">
        <div class="reg-box-pan display-inline">
            <div class="step">
                <ul>
                    <li class="col-xs-4 on">
                        <span class="num"><em class="f-r5"></em><i>1</i></span>
                        <span class="line_bg lbg-r"></span>
                        <p class="lbg-txt">填写找回密码账户信息</p>
                    </li>
                    <li class="col-xs-4">
                        <span class="num"><em class="f-r5"></em><i>2</i></span>
                        <span class="line_bg lbg-l"></span>
                        <span class="line_bg lbg-r"></span>
                        <p class="lbg-txt">验证账户信息</p>
                    </li>
                    <li class="col-xs-4">
                        <span class="num"><em class="f-r5"></em><i>3</i></span>
                        <span class="line_bg lbg-l"></span>
                        <p class="lbg-txt">修改密码成功</p>
                    </li>
                </ul>
            </div>
            <div class="reg-box" id="verifyCheck" style="margin-top:20px;">
                <div class="part1">

                    <div class="item col-xs-12">
                        <span class="intelligent-label f-fl"><b class="ftx04">*</b>邮箱：</span>
                        <div class="f-fl item-ifo">
                            <input type="text" class="txt03 f-r3 required" keycodes="tel" tabindex="2"
                                   data-valid="isNonEmpty" data-error="邮箱不能为空"
                                   id="phone"/>
                            <span class="ie8 icon-close close hide"></span>
                            <label class="icon-sucessfill blank hide"></label>
                            <label class="focus">请填写找回账户邮箱</label>
                            <label class="focus valid"></label>
                        </div>
                    </div>

                    <div class="item col-xs-12" style="height:auto">
                        <span class="intelligent-label f-fl">&nbsp;</span>
                        <label class="focus valid"></label>
                    </div>
                    <div class="item col-xs-12">
                        <span class="intelligent-label f-fl">&nbsp;</span>
                        <div class="f-fl item-ifo">
                            <a href="javascript:;" class="btn btn-blue f-r3" id="btn_part1">下一步</a>
                        </div>
                    </div>
                </div>
                <div class="part2" style="display:none">
                    <div class="alert alert-info" style="width:700px">验证码已发送至您的邮箱，请输入邮箱中的验证码，确保您的邮箱真实有效。</div>
                    <div class="item col-xs-12 f-mb10" style="height:auto">
                        <span class="intelligent-label f-fl">邮箱：</span>
                        <div class="f-fl item-ifo c-blue" id="phone1">
                            18872995381
                        </div>
                    </div>
                    <div class="item col-xs-12">
                        <span class="intelligent-label f-fl"><b class="ftx04">*</b>验证码：</span>
                        <div class="f-fl item-ifo">
                            <input type="text" maxlength="6" id="verifyNo" class="txt03 f-r3 f-fl required" tabindex="4"
                                   style="width:167px" data-valid="isNonEmpty||isInt" data-error="验证码不能为空||请输入数字验证码"/>
                            <span class="ie8 icon-close close hide" style="right:130px"></span>
                            <label class="icon-sucessfill blank hide"></label>
                            <label class="focus"><span>请查收邮件，并填写邮件中的验证码（此验证码3分钟内有效）</span></label>
                            <label class="focus valid"></label>
                        </div>
                    </div>
                    <div class="item col-xs-12">
                        <span class="intelligent-label f-fl">&nbsp;</span>
                        <div class="f-fl item-ifo">
                            <a href="javascript:;" class="btn btn-blue f-r3" id="btn_part2">修改密码</a>
                        </div>
                    </div>
                </div>
                <div class="part3" style="display:none">
                    <div class="item col-xs-12">
                        <span class="intelligent-label f-fl"><b class="ftx04">*</b>密码：</span>
                        <div class="f-fl item-ifo">
                            <input type="password" id="password" maxlength="20" class="txt03 f-r3 required" tabindex="3"
                                   style="ime-mode:disabled;" onpaste="return  false" autocomplete="off"
                                   data-valid="isNonEmpty||between:6-20||level:2"
                                   data-error="密码不能为空||密码长度6-20位||该密码太简单，有被盗风险，建议字母+数字的组合"/>
                            <span class="ie8 icon-close close hide" style="right:55px"></span>
                            <span class="showpwd" data-eye="password"></span>
                            <label class="icon-sucessfill blank hide"></label>
                            <label class="focus">6-20位英文（区分大小写）、数字、字符的组合</label>
                            <label class="focus valid"></label>
                            <span class="clearfix"></span>
                            <label class="strength">
                                <span class="f-fl f-size12">安全程度：</span>
                                <b><i>弱</i><i>中</i><i>强</i></b>
                            </label>
                        </div>
                    </div>
                    <div class="item col-xs-12">
                        <span class="intelligent-label f-fl"><b class="ftx04">*</b>确认密码：</span>
                        <div class="f-fl item-ifo">
                            <input type="password" maxlength="20" class="txt03 f-r3 required" tabindex="4"
                                   style="ime-mode:disabled;" onpaste="return  false" autocomplete="off"
                                   data-valid="isNonEmpty||between:6-16||isRepeat:password"
                                   data-error="密码不能为空||密码长度6-16位||两次密码输入不一致" id="rePassword"/>
                            <span class="ie8 icon-close close hide" style="right:55px"></span>
                            <span class="showpwd" data-eye="rePassword"></span>
                            <label class="icon-sucessfill blank hide"></label>
                            <label class="focus">请再输入一遍上面的密码</label>
                            <label class="focus valid"></label>
                        </div>
                    </div>
                    <div class="item col-xs-12">
                        <span class="intelligent-label f-fl">&nbsp;</span>
                        <div class="f-fl item-ifo">
                            <a href="javascript:;" class="btn btn-blue f-r3" id="btn_part3">下一步</a>
                        </div>
                    </div>
                </div>
                <div class="part4 text-center" style="display:none">
                    <h3>您已修改成功！</h3>
                    <p class="c-666 f-mt30 f-mb50">页面将在 <strong id="times" class="f-size18">10</strong> 秒钟后，跳转到 <a
                            href="/login" class="c-blue">登录</a></p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="m-sPopBg" style="z-index:998;"></div>
<div class="m-sPopCon regcon">
    <div class="m-sPopTitle"><strong>服务协议条款</strong><b id="sPopClose" class="m-sPopClose" onClick="closeClause()">×</b>
    </div>
    <div class="apply_up_content">
    	<pre class="f-r0">
		<strong>同意以下服务条款，提交注册信息</strong>
        </pre>
    </div>
    <center><a class="btn btn-blue btn-lg f-size12 b-b0 b-l0 b-t0 b-r0 f-pl50 f-pr50 f-r3"
               href="javascript:closeClause();">已阅读并同意此条款</a></center>
</div>
<script>
    $(function () {
        //第一页的确定按钮
        $("#btn_part1").click(function () {
            if (!verifyCheck._click()) return;
            $(".part1").hide();
            $(".part2").show();
            $(".step li").eq(1).addClass("on");
            let phones = document.getElementById('phone').value;
            let x = document.getElementById('phone1');
            x.innerHTML = phones;
            let email = document.getElementById('phone').value;
            email = {'email': email}
            $.ajax({
                type: "POST",
                url: "/sendCode/",
                data: JSON.stringify(email),
                success: function (data) {
                    data = JSON.parse(data);
                    if (data['msg'] !== 'success') {
                        alert(data['msg']);
                        location.reload()
                    }
                }
            })
        });
        //第二页的确定按钮
        $("#btn_part2").click(function () {
            if (!verifyCheck._click()) return;
            let verity_code = document.getElementById('verifyNo').value;
            verity_code = {'verity_code': verity_code}
            $.ajax({
                type: "POST",
                url: "/verify/",
                data: JSON.stringify(verity_code),
                success: function (data) {
                    data = JSON.parse(data);
                    if (data['msg'] !== 'success') {
                        alert(data['msg']);
                    } else {
                        $(".part2").hide();
                        $(".part3").show();
                    }
                }
            })
        });
        //第三页的确定按钮
        $("#btn_part3").click(function () {
            if (!verifyCheck._click()) return;
            $(".part3").hide();
            let email = document.getElementById('phone').value;
            let password = document.getElementById('password').value;
            let user = {
                'email': email,
                'password': password,
            }
            $.ajax({
                type: "POST",
                url: "/changePassword/",
                data: JSON.stringify(user),
                success: function (data) {
                    data = JSON.parse(data);
                    if (data['msg'] === 'success') {
                        $(".part4").show();
                        $(".step li").eq(2).addClass("on");
                        countdown({
                            maxTime: 10,
                            ing: function (c) {
                                $("#times").text(c);
                            },
                            after: function () {
                                window.location.href = "/login";
                            }
                        });
                    } else {
                        alert(data['msg']);
                        location.reload()
                    }
                }
            })
        });
    });

    function showoutc() {
        $(".m-sPopBg,.m-sPopCon").show();
    }

    function closeClause() {
        $(".m-sPopBg,.m-sPopCon").hide();
    }
</script>
</body>
</html>
